<template>
  <div class="gift-qcode-page">
    <a-card>
      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="handleAdd">新增兑换码库</a-button>
      </div>
      <!-- <a-form layout="inline">
        <a-form-item label="创建时间">
          <a-range-picker />
        </a-form-item>
        <a-form-item label="奖励品类型">
          <a-select style="width: 120px">
            <a-select-option value="jack"> Jack </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-input-search placeholder="请输入兑换码库名称搜索" style="width: 300px" />
        </a-form-item>
      </a-form> -->
      <a-table rowKey="id" :columns="columns" :data-source="rows">
        <!-- 时间 -->
        <span slot="start_time" slot-scope="text">{{ formatDate(text) }}</span>
        <span slot="end_time" slot-scope="text">{{ formatDate(text) }}</span>

        <!-- 兑换码格式 -->
        <span slot="format" slot-scope="text">{{
          text === 10 ? '英文数字组合' : text === 20 ? '纯数字组合' : ''
        }}</span>

        <!-- 操作 -->
        <span slot="action" slot-scope="text, item">
          <a v-action:delete @click="handleDelete(item)">删除</a>
        </span>
      </a-table>
    </a-card>

    <AddForm ref="AddForm" @handleSubmit="initData" />
  </div>
</template>
<script>
import * as Api from '@/api/gift'
import AddForm from './modules/AddForm'
import moment from 'moment'
export default {
  components: {
    AddForm,
  },
  data() {
    return {
      columns: [
        {
          title: '兑换码库名称',
          dataIndex: 'name',
        },
        {
          title: '兑换码有效期',
          dataIndex: 'validity',
        },
        {
          title: '兑换码开始时间',
          dataIndex: 'start_time',
          scopedSlots: { customRender: 'start_time' },
        },
        {
          title: '兑换码结束时间',
          dataIndex: 'end_time',
          scopedSlots: { customRender: 'end_time' },
        },
        {
          title: '兑换码格式',
          dataIndex: 'format',
          scopedSlots: { customRender: 'format' },
        },
        {
          title: '每天兑换次数',
          dataIndex: 'number_day',
        },
        {
          title: '永久兑换次数',
          dataIndex: 'number_all',
        },
        {
          title: '礼品卡积分',
          dataIndex: 'score',
        },
        {
          title: '礼品卡余额',
          dataIndex: 'money',
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '180px',
          scopedSlots: { customRender: 'action' },
        },
      ],
      rows: [],
      page: 1,
    }
  },

  mounted() {
    this.initData()
  },

  methods: {
    initData() {
      // 获取分类列表
      Api.exchange({
        page: this.page,
      }).then((result) => {
        this.rows = result.data.list.data
      })
    },

    // 新增
    handleAdd() {
      this.$refs.AddForm.add()
    },

    // 删除
    handleDelete(item) {
      const self = this
      const modal = this.$confirm({
        title: '您确定要删除该数据吗?',
        content: '删除后不可恢复',
        onOk() {
          return Api.deleteQcode({ codeIds: item['id'] })
            .then((result) => {
              self.$message.success(result.message, 1.5)
              self.initData()
            })
            .finally((result) => modal.destroy())
        },
      })
    },

    // 时间格式化
    formatDate(time) {
      return moment(time * 1000).format('YYYY-MM-DD HH:mm')
    },
  },
}
</script>
